<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <base href="<%=basePath%>">
    
     <!-- 给当前页面域添加一段java代码，用来自动获取当前项目名，不写死,然后再通过EL表达式获取 -->
    <%
    	pageContext.setAttribute("PATH",request.getContextPath());
    
     %>
    
    
  
  <!-- 搭建主页面显示 -->
  <div>
  			<!--添加模态框的显示-->
				<div class="modal fade" id="mymodal2">
					<div class="modal-dialog"><!--对话框-->
						<div class="modal-content"><!--内容-->
							<div class="modal-header"><!--头部-->
								<div class="close" data-dismiss="modal">&times;</div><!--关闭按钮-->
									添加轮播图
							</div>
							
							<div class="modal-body" id="form-context2"><!--身体-->
								<form class="form-horizontal" enctype="multipart/form-data" method="post">
								  <div class="form-group">
								    <label for="inputEmail3" class="col-md-2 control-label">上传图</label>
								    <div class="col-md-6">
								      <input type="file" name="img" id="mFile" required="required" class="form-control" >
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="inputPassword3" class="col-md-2 control-label">缩略图</label>
								    <div class="col-md-6">
								    	<img id="mImg" class="form-control" src="" style="width: 250px;height: 150px;">
								    </div>
								  </div>
								 
								 
								 <div class="modal-footer"><!--尾部-->
									<button class="btn btn-danger" data-dismiss="modal">Close</button>
									<input type="button" class="btn btn-success save5" value="添加"/>
								</div>
								</form>
							</div>
							
							
						</div>
					</div>
				</div>
  
  
  
  	<!-- 标题行 -->
   <h3><span class="label label-info ">德林文化传媒有限公司</span></h3>
    	
    	<!-- 图片展示列表 -->
     <table class="table table-striped table table-hover">
       <tr>
	       <th>ID</th>
	       <th>图片的缩略图</th>
	       <th>操作</th>
		      
		      
		    <div class="row">
	    		<div class="col-md-4 col-md-offset-8">
	    			<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal2">
	    				<span class="glyphicon glyphicon-plus"></span>
	    					添加轮播图
			       	</button>
   				</div>
    		</div> 
    		
       </tr>
        <c:forEach items="${rotates}" var="list">
            <tr>
           	 	<td>${list.id}</td>
   				<td><img src="${list.url}" height="50px" width="100px"></td>
           	 	
           	 	<td>
           	 		<div class="row">
			    		<div class="col-md-6 col-md-offset-0">
			    			<button type="button" class="btn btn-warning" onclick="updatePicture(${list.id})">
			    				<span class="glyphicon glyphicon-scissors"></span>
			    					修改
			    			</button>
			    			
			    			<button type="button" class="btn btn-danger" onclick="deletePicture(${list.id})">
			    				<span class="glyphicon glyphicon-trash"></span>
			    					删除
			    			</button>
	    				</div>
    				</div>
           	 	</td>
           	 </tr>
        </c:forEach>
        
     </table>
    		
    </div>		

    <script>
  
    	//保存按钮
		 $(".save5").click(function(){
    		 ajaxFileUpload();
    		  
		}); 
		
		//上传文件
		function ajaxFileUpload(){
			
			$.ajaxFileUpload({
                    url:'${PATH}/admin/insertRotate.do', //用于文件上传的服务器端请求地址
                    secureuri:false, //是否需要安全协议，一般设置为false
                    fileElementId:'mFile', //文件上传域的ID
                    dataType:'context' , //返回值类型 一般设置为json，只走error方法,改成context就走success方法了
                    success:function (msg){  //服务器成功响应处理函数
                       alert(msg);
    				//1、关闭模态框
    				$("#mymodal2").modal("hide");
    				 location.href="${PATH}/admin/AllAdmins.do";
                    },
                    error:function(msg){
                    	alert(msg);
                    	//1、关闭模态框
    				$("#mymodal2").modal("hide");
                    }
                    
              });
		}
		
		
		
		/* function insertPicture(){
			location.href="${PATH}/PictureInsertJsp.do";
		} */
		
		//修改图片
		function updatePicture(id){
			if(confirm("确认修改id为"+id+"吗？")){
				location.href="${PATH}/admin/updatePicture.do?id="+id;
			}
		}
		
		//删除图片
		function deletePicture(id){
			if(confirm("确认删除id为"+id+"吗？")){
				location.href="${PATH}/admin/deletePicture.do?id="+id;
				alert("删除成功！")
			}
		}
		
		//图片的缩略图
		 document.getElementById('mFile').onchange = function (ev) {
            //判断 FileReader 是否被浏览器所支持
            if (!window.FileReader) return;

            console.log(ev);

            var file = ev.target.files[0];  

            if(!file.type.match('image/*')){
                alert('上传的图片必修是png,jpg格式的！');
                ev.target.value = ""; //显示文件的值赋值为空
                return;
            }

            var reader = new FileReader();  // 创建FileReader对象

            reader.readAsDataURL(file); // 读取file对象，读取完毕后会返回result 图片base64格式的结果

            reader.onload = function(e){
                document.getElementById('mImg').src = e.target.result;
            }

        }
	</script>
    